<template>
  <div class="pest">
      <div class="pest-left">
        <div class="left-title">设备列表</div>
        <div class="left-content">
          <a-menu mode="inline" theme="light"  :defaultOpenKeys="defaultOpenKeys" :selectedKeys="selectedKeys">
            <a-sub-menu key="m1">
              <template #icon><pull-request-outlined /></template>
              <template #title>抚远虫情</template>
              <a-menu-item v-for="(item,index) in addressList"  :key="item.code"  @click="site(item.code,index)">
                <template #icon><PieChartOutlined /></template><div class="circle"></div><i> {{item.name}}{{item.code}}</i>
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </div>
      </div>
      <div class="pest-right">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                  <a-col :xl="8" :lg="9" :md="10" :sm="30">
                    <a-form-item label="采样时间">
                      <a-range-picker
                      v-model="queryParam.buildTime"
                      style="width: 100%" />
                    </a-form-item>
                  </a-col>
                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                      <a-button type="primary" @click="searchQuery" icon="search">搜索</a-button>
                      <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                    </span>
                  </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 查询区域-END -->
          <!-- 数据-->
          <div>
            <a-list
            :grid="{ gutter: 16, column: 4 }"
            :dataSource="dataSource"
            :pagination="{
              pageSize:8,
              onChange:(page)=>onPageChange(page),
            }"
            >
            <a-list-item slot="renderItem" slot-scope="item, index">
            <a-card :hoverable="true">
              <a-card-meta>
                <div class="meta-cardInfo" slot="description">
                  <div class="meta-cardInfo-content">
                    <img style="width: 100%;" :src="item.imgUrl" :preview="item.imgUrl">
                    <p>设备名称： <span>{{ item.code }}</span></p>
                    <p>采样时间： <span>{{ item.samplingTime }}</span></p>
                    <p>害虫数量： <span>{{ item.pestNum }}</span></p>
                    <p>分析报告： <span>{{ item.analysisReport }}</span></p>
                  </div>
                </div>
              </a-card-meta>
            </a-card>
          </a-list-item>
          </a-list>
          </div>
      </div>
  </div>
</template>

<script>
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction } from '@/api/manage'
  export default {
    name: 'pest',
    mixins:[JeecgListMixin, mixinDevice],
    components: {  },
    data () {
      return {
        defaultOpenKeys:['m1'],       
        page:1,
        code:''
      }
    },
    created() {
     this.getTypeList();
    },
    computed: {
    },
    methods: {
    //页码改变的回调
     onPageChange(page) {
      this.getList(page,this.code)//数据信息列表
    },
      //站点左侧数据
      getTypeList(){
        this.addressList=[
          {
            id:'1',
            name:'东发村',
            code:'0511220007',
          },
          {
            id:'2',
            name:'东发村附近',
            code:'0512220003',
          },
          {
            id:'3',
            name:' 东河村',
            code:'0511220001',
          }
        ]
        this.selectedKeys=this.addressList[0]['code']
        this.getList(this.page,this.addressList[0]['code']);
          /*  getAction('接口地址').then((res) => {
          this.addressList = res.data;
        }) */
      },
      //站点右侧数据
      getList(page=1,code){
        console.log(code)
        this.dataSource= [
          {
            code: "0511220008",
            samplingTime:"2023-04-18 22:06:53",
            pestNum:"3",
            analysisReport:"飞蛾:1;蜱虫:2;",
            imgUrl:"http://images.jnrsmcu.com/wormImages/327038-438dfc6139d24124b3a53f3dce50c148.jpg"
          },
          {
            code: "0511220008",
            samplingTime:"2023-04-18 22:06:53",
            pestNum:"3",
            analysisReport:"飞蛾:1;蜱虫:2;",
            imgUrl:"http://images.jnrsmcu.com/wormImages/327038-438dfc6139d24124b3a53f3dce50c148.jpg"
          },
          {
            code: "0511220008",
            samplingTime:"2023-04-18 22:06:53",
            pestNum:"3",
            analysisReport:"飞蛾:1;蜱虫:2;",
            imgUrl:"http://images.jnrsmcu.com/wormImages/327038-438dfc6139d24124b3a53f3dce50c148.jpg"
          },
          {
            code: "0511220008",
            samplingTime:"2023-04-18 22:06:53",
            pestNum:"3",
            analysisReport:"飞蛾:1;蜱虫:2;",
            imgUrl:"http://images.jnrsmcu.com/wormImages/327038-438dfc6139d24124b3a53f3dce50c148.jpg"
          },
          {
            code: "0511220008",
            samplingTime:"2023-04-18 22:06:53",
            pestNum:"3",
            analysisReport:"飞蛾:1;蜱虫:2;",
            imgUrl:"http://images.jnrsmcu.com/wormImages/327038-438dfc6139d24124b3a53f3dce50c148.jpg"
          },
          {
            code: "0511220008",
            samplingTime:"2023-04-18 22:06:53",
            pestNum:"3",
            analysisReport:"飞蛾:1;蜱虫:2;",
            imgUrl:"http://images.jnrsmcu.com/wormImages/327038-438dfc6139d24124b3a53f3dce50c148.jpg"
          },
          {
            code: "0511220008",
            samplingTime:"2023-04-18 22:06:53",
            pestNum:"3",
            analysisReport:"飞蛾:1;蜱虫:2;",
            imgUrl:"http://images.jnrsmcu.com/wormImages/327038-438dfc6139d24124b3a53f3dce50c148.jpg"
          },
          {
            code: "0511220008",
            samplingTime:"2023-04-18 22:06:53",
            pestNum:"3",
            analysisReport:"飞蛾:1;蜱虫:2;",
            imgUrl:"http://images.jnrsmcu.com/wormImages/327038-438dfc6139d24124b3a53f3dce50c148.jpg"
          },
          {
            code: "0511220008",
            samplingTime:"2023-04-18 22:06:53",
            pestNum:"3",
            analysisReport:"飞蛾:1;蜱虫:2;",
            imgUrl:"http://images.jnrsmcu.com/wormImages/327038-438dfc6139d24124b3a53f3dce50c148.jpg"
          },
        ]
        let result = {}
       /*  getAction('接口地址', { pageNo: pageNo }).then((res) => {
          result = res.result
          // console.log(res)
          this.dataSource = result.records;
        }) */
      },
      //站点点击切换数据
      site(code,index){
        this.selectedKeys=this.addressList[index]['code']
       // console.log(code)
        this.code=code
        this.getList(this.page,code);
      }
    }
  }
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style scoped>
.pest{
  margin: 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
}
.pest-left{
  width: 20%;
  height: 700px;
  min-height: 300px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}
.pest-left .circle{
  background: #30b08f;
  clip-path: circle(50%);
  height: 10px;
  width: 10px;
  margin-right: 10px;
}
.pest-left .ant-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.left-title{
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  padding: 10px;
  font-size: 15px;
}
.pest-right{
  width: 80%;
  margin:0px 20px;
}
.pest-right .ant-form-item-label label{
  color: #606266!important;
  font-weight: 700;
}
.pest-right .ant-card{
  border-radius: 4px;
  border: 2px solid #ddd;
  background-color: #fff;
  webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
}
.pest-right .ant-card-meta-description{
  color: black!important;;
}
</style>
